<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

    <div id="app">
        <child :message="message"></child>
        <!-- message前面加上:说明，后面的"message"是一个变量，而不是一个定值；如果想传一个定值，那么去掉 -->
        <!-- message前面的冒号就可以，定值就是 message -->
    </div>

    <div id="">
        <div id="counter-event-example">
            <p>{{ total }}</p>
            <button-counter v-on:increment="incrementTotal"></button-counter><br/>
            <button-counter v-on:increment="incrementTotal"></button-counter>
        </div>
    </div>

    <div id="div_col">
        <p>自定义事件</p>
        <p>{{total}}</p>
        <example1 v-on:incretment="incretmentTotal" value="点击"></example1>
    </div>

    <script type="text/javascript" src="../vue.js"></script>
    <script>
        // Prop 验证
        // 组件可以为 props 指定验证要求。
        // prop 是一个对象而不是字符串数组时，它包含验证要求：
        Vue.component('example', {
            props: {
                // 基础类型检测 （`null` 意思是任何类型都可以）
                propA: Number,
                // 多种类型
                propB: [String, Number],
                // 必传且是字符串
                propC: {
                    type: String,
                    required: true
                },
                // 数字，有默认值
                propD: {
                    type: Number,
                    default: 100
                },
                // 数组／对象的默认值应当由一个工厂函数返回
                propE: {
                    type: Object,
                    default: function () {
                        return { message: 'hello' }
                    }
                },
                // 自定义验证函数
                propF: {
                    validator: function (value) {
                        return value > 10
                    }
                }
            }
        })

        /*
        * type 可以是下面原生构造器：
        String
        Number
        Boolean
        Function
        Object
        Array
        type 也可以是一个自定义构造器，使用 instanceof 检测。
        */


        // 父组件给子组件传值的时候，如果想传入一个变量，写法如下：

        // 注册
        Vue.component('child', {
            // 声明 props
            props: ['message'],
            // 同样也可以在 vm 实例中像 "this.message" 这样使用
            template: '<span>{{ message }}</span>'
        })
        // 创建根实例
        new Vue({
            el: '#app',
            data:{
                message:"hello",
            }
        })


        // 子组件通过 $emit 触发父组件的方法时，如果需要传递参数，可在方法名后面加参数数组。
        //
        // 比如 $emit("FunctionName") 当要传递参数时 ：$emit("FunctionName",[arg1,arg2...])。

        Vue.component('button-counter', {
            template: '<div><button v-on:click="incrementHandler(1)">-</button>{{ counter }}<button v-on:click="incrementHandler(2)">+</button></div>',
            data: function () {
                return {
                    counter: 0
                }
            },
            methods: {
                incrementHandler: function (v) {
                    if(v==1){
                        this.counter -= 1
                        this.$emit('increment',[1])
                    }else{
                        this.counter += 1
                        this.$emit('increment',[2])
                    }

                }
            },
        })
        new Vue({
            el: '#counter-event-example',
            data: {
                total: 0
            },
            methods: {
                incrementTotal: function (d) {
                    if(d==1){
                        this.total -= 1
                    }else{
                        this.total += 1
                    }

                }
            }
        })

        /*拓展-如何通过调整组件属性，实现修改组件的显示等内部属性。

        使用 Props（全局）

        全局定义组件*/

        Vue.component('example1', {
            props: ['value'],
            template: '<button v-on:click="incrementHanlder">{{value}}</button>',
            // data: function () {
            //   return {
            //     count: 0
            //   }
            // },
            methods: {
                incrementHanlder: function () {
                    // this.count += 1
                    this.$emit('incretment')
                }
            }
        })
        new Vue({
            el: '#div_col',
            data: {
                total: 0
            },
            methods: {
                incretmentTotal: function () {
                    this.total += 1
                }
            }
        })
    </script>
</body>
</html>